*{
    padding: 0;
    margin: 0;
}
body{
    background-color: #ffbd4a;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center; 
   flex-direction: column;
}
.box{
    width: 300px;
    height: 200px;
    /* 通过背景图片达到利用z-index进行太阳的隐藏 */
    background: url(./img/bg.png) no-repeat top;
    position: relative;
    margin:100px auto 0;
    display: flex;
    justify-content: center;

}
.sun{
    width: 128px;
    height: 128px;
    position: absolute;
    top: -60%;
    z-index: -1;
    animation: move 3s infinite linear;

}
@keyframes move{
    0%{
        transform: translateY(0);
    }
    10%{
        transform: translateY(0);
    }
    40%{
        transform: translateY(50%);
    }
    70%{
        transform: translateY(50%);
    }

    100%{
        transform: translateY(0);
    }

}
.sunbody{
    animation: scroll 3s infinite linear;
}
@keyframes scroll{
    0%{
        transform: rotate(0deg);
    }
    
    20%{
        transform: rotate(72deg);
    }
    40%{
        transform: rotate(144deg);
    }
    60%{
        transform: rotate(216deg);
    }
    80%{
        transform: rotate(288deg);
    }
    100%{
        transform: rotate(360deg);
    }

}
.box p{
    text-align: center;
    padding-top:40px;
    font-size: 25px;
    color: black;
    animation: ptext 3s infinite linear;
}
@keyframes ptext{
    0%{
       opacity:1; 
    }
   
    40%{
       opacity:0; 
        
    }
    60%{
       opacity:0.5; 
        
    }
    
    100%{
       opacity:1; 
        
    }
}